<template>
	<view class="page">
		<!-- 头部背景图 -->
		<view class="pageTopImg" :style="'padding-top:' + touHeight + 'px'"></view>
		<!-- 顶部菜单 -->
		<view class="topHeader" :style="'height:' + touHeight +'px;'">
			<view class="fanhuiUp" @tap="toFanhuiUp"></view>
			<view class="pageTitle">订单详情</view>
		</view>
		<view class="page_content" :style="'padding-top:' + touHeight + 'px'">
			<!-- 报名中 -->
			<view class="gangwei_top" v-if="status==2">
				<!-- 内容区背景图 -->
				<view class="page_bg"><image :src="URL+'/JD_wx_img/pageTop_bg03.png'" mode="widthFix"></image></view>
				<view class="gangwei_top_box">
					<image :src="URL+'/JD_wx_img/property5.png'" class="dingdan_state" mode="widthFix"></image>
					<view class="details_name">岗位信息</view>
					<view class="details_yi">
						<view class="gangwei_name">{{type_text}}</view>
					</view>
					<view class="ganwei_text">到岗时间<view class="jieshao">{{arrival}}</view></view>					
					<view class="xinxi_box">
						<view class="renshu_fu">
							<view class="renshu_list">
								<view class="ren"><view class="dan hong">{{now}}</view>人</view>
								<view class="text">已报名</view>
							</view>
							<view class="renshu_list">
								<view class="ren"><view class="dan">{{sum}}</view>人</view>
								<view class="text">共需人数</view>
							</view>
						</view>
						<view class="public_btn public_btn03" style="margin: 0px;margin-top: 60rpx;"  @tap="toShaixuanrenyuan">筛选报名</view>
					</view>
				</view>
			</view>
			<!-- 进行中 -->
			<view class="gangwei_top" v-else>
				<!-- 内容区背景图 -->
				<view class="page_bg"><image :src="URL+'/JD_wx_img/pageTop_bg03.png'" mode="widthFix"></image></view>
				<view class="gangwei_top_box">
					<image :src="URL+'/JD_wx_img/property2.png'" class="dingdan_state" v-if="status==3" mode="widthFix"></image>
					<image :src="URL+'/JD_wx_img/property4.png'" class="dingdan_state" v-if="status==4" mode="widthFix"></image>
					<view class="details_name">岗位信息</view>
					<view class="details_yi">
						<view class="gangwei_name">{{type_text}}</view>
					</view>
					<view class="ganwei_text">到岗时间<view class="jieshao">{{arrival}}</view></view>					
					<view class="xinxi_box">
						<view class="renshu_fu">
							<view class="renshu_list" style="width: 33.3333%;">
								<view class="ren"><view class="dan">{{daogang}}</view>人</view>
								<view class="text">已到岗</view>
							</view>
							<view class="renshu_list" style="width: 33.3333%;">
								<view class="ren"><view class="dan">{{wangong}}</view>人</view>
								<view class="text">已完工</view>
							</view>
							<view class="renshu_list" style="width: 33.3333%;">
								<view class="ren"><view class="dan">{{sum}}</view>人</view>
								<view class="text">总人数</view>
							</view>
						</view>
						<view class="public_btn_box" :style="status==4?'display:none;':'display:block;'">
							<view class="public_list">
								<view class="public_btn public_btn04" @tap="toArrival">确认到岗</view>
							</view>
							<view class="public_list">
								<view class="public_btn public_btn05" @tap="toFinished">确认完工</view>
							</view>
						</view>
					</view>
					<view class="tiaozheng_shichang" @tap="toDuration">手动调整工作时长</view>
				</view>
			</view>
			<view class="gangwei_renyuan">
				<view class="details_name">岗位人员</view>
				<view class="gangwei_box">
					<view class="gangwei_list" v-for="item in people" @tap="toRenyuan" :data-id="item.id" :data-orderId="item.order_id">
						<view class="touxiang" :style="'background: url('+item.avatar+') center center no-repeat;'"></view>
						<view class="name">{{item.username}}</view>
						<view class="text_box">
							<view class="old">{{item.age}}岁</view>
							<view class="gender" :class="item.gender === 1 ? 'nan' : 'nv'"></view>
							<view class="jibie">{{item.level_text}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="public_btn public_btn02" @tap="toFanhuiUp">返回列表</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				touHeight: 0,
				pageTop: 0,
				//域名拼接
				URL: app.globalData.URL,
				type_text:'',//岗位名称
				arrival:'',//到岗时间
				now:'',//已报名人数
				sum:'',//招聘总人数
				status:'',//订单状态2 =>'报名中',3 =>'进行中',4 =>'已完成
				people:[],//报名人员
				daogang:'',//已到岗人数
				wangong:'',//已完工人数
			}
		},
		onLoad(options){
			var that = this;
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			
			that.id = options.id;//兼职ID
			//我的用工订单详情
			uni.request({
				url: app.globalData.URL + '/api/v1/Hotel/details?id='+that.id,
				method: "get",
				header:{
					token: uni.getStorageSync('token')
				},
				success: function (res) {
					that.type_text = res.data.data.type_text;//岗位名称
					that.arrival = res.data.data.arrival;//到岗时间
					that.now = res.data.data.now;//已报名人数
					that.sum = res.data.data.sum;//招聘总人数
					that.status = res.data.data.status;//订单状态2 =>'报名中',3 =>'进行中',4 =>'已完成
					that.people = res.data.data.people;//报名人员
					that.daogang = res.data.data.daogang+'';//已到岗人数
					that.wangong = res.data.data.wangong+'';//已完工人数
					that.hotel_id = res.data.data.hotel_id;//酒店Id
					// that.order_id = res.data.data.people.map(item=>item.order_id);
				}
			})
		},
		methods: {
			//返回上一级
			toFanhuiUp:function(){
				uni.navigateBack({
				    delta: 1
				})
			},
			
			//跳转到确认到岗
			toArrival(){
				var that = this;
				var id = that.id;
				uni.navigateTo({
				    url: '/pages/business_my_center/queren_daogang/queren_daogang?id='+id,
				});
			},
			//跳转到确认完工
			toFinished(){
				var that = this;
				var id = that.id;
				uni.navigateTo({
				    url: '/pages/business_my_center/queding_wangong/queding_wangong?id='+id,
				});
			},
			//跳转到调整工作时长
			toDuration(){
				var that = this;
				var id = that.id;
				uni.navigateTo({
				    url: '/pages/business_my_center/yanchang_shichang/yanchang_shichang?id='+id,
				});
			},
			//跳转到人员介绍
			toRenyuan(e){
				var that = this;
				var user_id = e.currentTarget.dataset.id;//用户id
				var hotel_id = that.hotel_id;//酒店id
				var order_id = e.currentTarget.dataset.orderid;//订单id
				uni.navigateTo({
				    url: '/pages/business_my_center/daogang_wangong_ziliao/daogang_wangong_ziliao?user_id='+user_id+'&hotel_id='+hotel_id+'&order_id='+order_id,
				});
			},
			//跳转到筛选人员
			toShaixuanrenyuan(){
				var that = this;
				var id = that.id;
				uni.navigateTo({
				    url: '/pages/business_my_center/shuaixuan_renyuan/shuaixuan_renyuan?id='+id,
				});
			},
			
			//跳转到详情
			tojiudianjie:function(){
				uni.navigateTo({
				    url: '../jiudian_brief/jiudian_brief',
				});
			},
		}
	}
</script>

<style>
	.renshu_fu{
		padding-bottom: 0px;
	}
	.page_content{
		padding: 0px;
		padding-bottom: 60rpx;
	}
	.gangwei_top{
		padding: 0px;
		border-radius: 0rpx;
		position: relative;
	}
	.xinxi_box{
		margin-top: 0px;
		padding: 30rpx;
		border-top: 2rpx solid #eee;
	}
	.xinxi_box .xinxi_list{
		margin: 7rpx 0px;
	}
	.details_yi{
		padding: 0px 30rpx;
		margin-top: 30rpx;
		line-height: 160%;
		position: relative;
	}
	.details_yi .gangwei_name{
		float: left;
		font-weight: 900;
		font-size: 44rpx;
		color: #333333;
	}
	.ganwei_text{
		font-size: 24rpx;
		color: #888888;
		margin: 20rpx 30rpx;
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/xinxi_img01.png) left center no-repeat;
		background-size: 32rpx 32rpx;
		padding-left: 40rpx;
	}
	.ganwei_text .jieshao{
		color: #E85426;
		display: inline-block;
		margin-left: 10rpx;
	}
	.gangwei_top_box{
		position: relative;
		z-index: 8;
		padding-top: 30rpx;
	}
	.topHeader{
		z-index: 100;
	}
	.pageTopImg {
		z-index: 80;
	}
	.dingdan_state{
	    width: 786rpx;
	    max-width: 100%!important;
	    margin: 0px auto;
	    position: relative;
		 margin-top: -65rpx;
	}
	.public_btn_box{
		overflow: hidden;
		margin-top: 60rpx;
	}
	.public_list{
		float: left;
		width: 50%;
		box-sizing: border-box;
		padding: 0px 8rpx;
	}
	.public_list .public_btn{
		margin: 0px;
	}
	.tiaozheng_shichang{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		color: #3079DC;
		text-align: center;
	    border-top: 2rpx solid #eee;
	}
	.gangwei_renyuan{
		background: #fff;
		margin-top: 30rpx;
		padding: 30rpx 0px;
	}
	.gangwei_box{
		overflow: hidden;
	}
	.gangwei_list{
		width: 33.3333%;
		float: left;
		text-align: center;
		margin-top: 40rpx;
	}
	.gangwei_list .touxiang{
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		border: 8rpx solid #F3F3F3;
		background-size: cover!important;
		margin: 0px auto;
	}
	.gangwei_list .name{
		color: #333333;
		font-size: 28rpx;
		margin-top: 5rpx;
	}
	.gangwei_list .text_box{
		margin-top: 10rpx;
	}
	.gangwei_list .text_box .old{
		display: inline-block;
		font-size: 20rpx;
		color: #888888;
	}
	.gangwei_list .text_box .gender{
		display: inline-block;
		margin: 0rpx 15rpx;
	}
	.gangwei_list .text_box .jibie{
		display: inline-block;
		height: 36rpx;
		background: #FAF6F4;
		border-radius: 6rpx;
		color: #E85426;
		font-weight: bold;
		font-size: 20rpx;
		padding: 0px 15rpx;
	}
</style>
